<template>
  <div class="mainBasicInfo">
  <!--
    <p class="title">
      锁体结构图片
    </p>
    -->
    <!--
     <div class="brand-info img-info">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品图片：">
          <div class="img-box">
            <img :src="basicInfoData.productImg" alt="" />

          </div>
        </el-form-item>
      </el-form>
    </div>
    -->
    <div class="brand-info img-info">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="前锁图片：">
          <div class="img-box">
            <el-image
              style="width: 205px; height: 186px"
              v-for="(item, index) in frontLockImg"
              :src="item"
              :key="index"
              :preview-src-list="frontLockImg"
            >
            </el-image>
          </div>
        </el-form-item>

        <el-form-item label="后锁图片：">
          <div class="img-box">
            <el-image
              style="width: 205px; height: 186px"
              v-for="(item, index) in backPanelImg"
              :src="item"
              :key="index"
              :preview-src-list="backPanelImg"
            >
            </el-image>
          </div>
        </el-form-item>
      </el-form>
    </div>


    <div class="brand-info img-info">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="前锁拆解图片">
          <div class="img-box">
            <el-image
              style="width: 205px; height: 186px"
              v-for="(item, index) in frontUnpackImg"
              :src="item"
              :key="index"
              :preview-src-list="frontUnpackImg"
            >
            </el-image>
          </div>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="后锁拆解图片">
          <div class="img-box">
            <el-image
              style="width: 205px; height: 186px"
              v-for="(item, index) in backUnpackImg"
              :src="item"
              :key="index"
              :preview-src-list="backUnpackImg"
            >
            </el-image>
          </div>
        </el-form-item>
      </el-form>
    </div>




  </div>
</template>
<script>
export default {
  props: {
    basicInfoData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formInline: {}
    };
  },
  mounted() {},

   computed: {

     frontLockImg() {
      if (this.basicInfoData.frontLockImg) {
        return this.basicInfoData.frontLockImg.split(",");
      } else {
        return [];
      }
    },
    backPanelImg() {
      if (this.basicInfoData.backPanelImg) {
        return this.basicInfoData.backPanelImg.split(",");
      } else {
        return [];
      }
    },
    frontUnpackImg() {
      if (this.basicInfoData.frontUnpackImg) {
        return this.basicInfoData.frontUnpackImg.split(",");
      } else {
        return [];
      }
    },
    backUnpackImg() {
      if (this.basicInfoData.backUnpackImg) {
        return this.basicInfoData.backUnpackImg.split(",");
      } else {
        return [];
      }
    }
  },
  methods: {
  }
};
</script>
<style scoped>
.mainBasicInfo {
  width: 100%;
  height: 100%;
}
.title {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #263c92;
  border-bottom: 1px solid #b1b7ca;
  width: 100%;
}
.brand-info {
  margin: 35px 0;
  border-bottom: 1px solid #b1b7ca;
}
.el-form-item {
  margin-right: 150px;
}
/deep/.el-form-item__label {
  width: 120px;
  color: #888888;
}
.type-info .el-form-item {
  margin-right: 130px;
}
.img-info .el-form-item {
  margin-right: 0;
}
.img-info /deep/.el-form-item__label {
  width: 110px;
}
.img-box img:last-child {
  margin-right: 0;
}
.img-box img {
  width: 205px;
  height: 186px;

  background-color: #e1e2e8;
  margin-right: 10px;
}
.el-image{
  margin-right: 13px;
}
.video-info {
  border-bottom: none;
}
</style>
